<template>
	<div>
		<div class="modal-task"></div>
    <div class="modal-dialog">
      <div class="modal-content">
          <p class="key-bold">这是一款自律神器。</p>
          <p class="key-bold">将生活想象成通关打怪</p>
          <p class="little-tip">举个例子：</p>
          <p class="little-content">
            今天有做运动，加2分
          </p>
          <p class="little-content">
            今天没有运动，减4分
          </p>
      </div>
      <div class="modal-footer">
        <button open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="login">授权登录</button>
      </div>
    </div>
	</div>
</template>


<script>
import qcloud from 'wafer2-client-sdk'
import { showSuccess } from '@/util'
import config from '@/config'

export default {
  name: 'LoginWindow',
  methods: {
    login () {
      // wx.showToast是小程序的消息提示框API
      wx.showToast({
        title: '登录中',
        icon: 'loading'
      })
      qcloud.setLoginUrl(config.loginUrl)
      qcloud.login({
        success: res => {
          this.$emit('changeShow', false, res)
          // 登录成功后，显示底部导航栏
          wx.showTabBar()
          console.log('登录成功', res)
          this.loginSuccess(res)
        },
        fail: err => {
          console.log('登录失败', err)
        }
      })
    },
    loginSuccess (res) {
      showSuccess('登录成功')
      wx.setStorageSync('userinfo', res)
    }
  }
}
</script>


<style lang="scss" scoped>
.modal-task {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}
.modal-dialog {
  box-sizing: border-box;
  width: 560rpx;
  overflow: hidden;
  position: fixed;
  top: 40%;
  left: 0;
  z-index: 9999;
  background: #fff;
  margin: -150rpx 95rpx;
  border-radius: 16rpx;

  .modal-content {
    box-sizing: border-box;
    display: flex;
    padding: 0rpx 53rpx 50rpx 53rpx;
    font-size: 32rpx;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  
    .key-bold {
      padding-top: 5px;
      font-size: 18px;
      font-weight: bold; 
    }

    .little-tip {
      padding-top:15px;
      padding-bottom:3px;
      font-size: 17px;
      font-weight:bold;
      color: #feb600;
    }

    .little-content {
      padding-top:5px;
      font-size: 20px;
      color:#606060;
    }
  }

  .modal-footer {
    button {
      width: 100%;
      background-color:#feb600;
      color:#FFFFFF;
      font-weight:bold;
    }
  }
}
</style>